<template>
	<div>
		<div class="navHeaderContainer">
			<nav-header></nav-header>
		</div>
		<div class="navBreadcrumbContainer">
			<nav-breadcrumb>
				<el-breadcrumb-item :to="{ path: '/PersonInfo' }">个人中心</el-breadcrumb-item>
			</nav-breadcrumb>
		</div>
		<div class="userInfoContainer clear_blth">
			<el-container>
				<el-aside width="150px" class="asideContainer">
					<el-col :span="24">
						<el-menu default-active="PersonalData" class="el-menu-vertical" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="border: none;">
							<!--个人资料-->
							<router-link to="/PersonalData">
								<el-menu-item index="PersonalData">
									<i class="el-icon-menu"></i>
									<span slot="title">个人资料</span>
								</el-menu-item>
							</router-link>
							<!--地址管理-->
							<router-link to="/AddressData">
								<el-menu-item index="AddressData">
									<i class="el-icon-tickets"></i>
									<span slot="title">地址管理</span>
								</el-menu-item>
							</router-link>
							<!--全部订单-->
							<router-link to="/AllOrder">
								<el-menu-item index="AllOrder">
									<i class="el-icon-document"></i>
									<span slot="title">全部订单</span>
								</el-menu-item>
							</router-link>
						</el-menu>
					</el-col>
				</el-aside>
				<el-main class="mainContainer">
					<router-view></router-view>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<style>
	.userInfoContainer {
		width: 1200px;
		margin: 20px auto;
	}
	
	.el-container {
		height: 100%;
	}
	
	.asideContainer {
		background: paleturquoise;
	}
	
	.mainContainer {
		/*background: indigo;*/
		padding: 0px 20px;
		min-height: 500px;
	}
</style>

<script type="text/ecmascript-6">
	import NavHeader from '@/components/NavHeader.vue'
	import NavBreadcrumb from '@/components/NavBreadcrumb.vue'
	import axios from "axios"
	export default {
		data() {
			return {

			};
		},
		components: {
			//header
			NavHeader,
			//面包屑
			NavBreadcrumb
		},
		methods: {

		}
	}
</script>